<script setup>
import {ref,onMounted,reactive,defineProps,defineEmits, onUpdated} from 'vue'
const postreRef = ref(null)

const props= defineProps({
    isPlay:{
        type:Boolean,
        default:false
    },
    postreImg:{
        type:String,
        default:"/images/myndy.jpg"
    }
})


const emit = defineEmits(['playMusic'])
onMounted(() => {
    props.isPlay ? postreRef.value.style.animationPlayState = "paused" : postreRef.value.style.animationPlayState = "running"
})
onUpdated(() => {
    props.isPlay ? postreRef.value.style.animationPlayState = "running" : postreRef.value.style.animationPlayState = "paused"
})
const onClickPlayButton = () => {
    emit('playMusic', !props.isPlay)
    

}

</script>
<template>
    <div class="postre">
        <img :src=" props.postreImg" alt="" class="playto" ref="postreRef" @click="onClickPlayButton">
    </div>
</template>


<style lang="scss" scoped>
// 唱片旋转动画
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

// 用于控制唱片旋转
.playto {
    animation: rotate 10s linear infinite;
}

@keyframes postreIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.postre {
    width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: postreIn .3s ease-in-out;

    img {
        width: 500px;
        height: 500px;
        border-radius: 50%;
        object-fit: cover;
        border: 20px solid #333;
        box-shadow: 0 0 10px 4px #fff;


    }
}
</style>